<template>
  <view v-if="isToken">
      <view v-for="item in userInfo" :key="item.id" :class="s.item">
          <view :class="s.left">{{item.userItem}}</view>
          <view :class="right">
              <image v-if="item.id === 0" :src="item.value" style="width:35px;height:35px;border-radius:50%;vertical-align:middle;"></image>
              <text v-else :style="{color:item.id===1||item.id===3?'#aaa':'#000'}">{{item.value}}</text>
               <AtIcon value='chevron-right' size='30' color='#333'></AtIcon>
          </view>
      </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import { AtIcon } from 'taro-ui-vue3'
import Taro from "@tarojs/taro"
interface userInfo{
    userItem:string,
    value:string,
    id:number

}
interface user{
    avatar:string,
    username:string,
    realname:string
}
export default defineComponent({
    components:{
        AtIcon
    },
    setup(){
        const user:user = Taro.getStorageSync("userInfo")
        const isToken:string|undefined = Taro.getStorageSync("token")
        const userInfo = reactive<Array<userInfo>>([
            {userItem:"头像",value:user.avatar,id:0},
            {userItem:"用户名",value:user.username,id:1},
            {userItem:"昵称",value:user.realname,id:2},
            {userItem:"修改作品",value:"作品集",id:3}
        ])
        // const user = computed(()=>Taro.getStorageSync("userInfo"))
        return {
            userInfo,
            user,
            isToken
        }
    }
})
</script>

<style lang="scss" module="s">
    .item{
        border-bottom: 1Px solid #eeeeee;
        display: flex;
        box-sizing: border-box;
        padding: 0 18Px;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 48Px;
        background-color: #fff;
        transition: all 0.2s;
        .tap{
            background-color: rgba($color: #7BA4FA, $alpha: 0.1);
        }
    }
</style>